import Modal from '@/components/modal';
import { useState } from 'react';

export default function ModalPage() {
  const [visible, setVisible] = useState(false);
  return (
    <main>
      {/* 通过 command 打开 */}
      <div
        className='mb-4 bg-orange-600 py-4 text-center text-xl text-white'
        onClick={() =>
          Modal.open({
            title: 'modal title',
            children: <div onClick={Modal.cancel}>open modal by command change</div>,
            onClose: () => {
              console.log('command modal onClose');
            }
          })
        }
      >
        open modal by command
      </div>
      <div
        className='mb-4 bg-[#eccc68] py-4 text-center text-xl text-white'
        onClick={() => setVisible(true)}
      >
        open modal by state change
      </div>
      {/* 通过 state 控制 */}
      <Modal
        title='modal title'
        visible={visible}
        onClose={() => {
          console.log('state modal onClose');
          setVisible(false);
        }}
      >
        <div onClick={() => setVisible(false)}>open modal by state change</div>
      </Modal>
    </main>
  );
}
